<template>
  <el-dialog title="设置时间" :visible.sync="selectTimeVisible" width="420px" :before-close="handleClose">
    <div class="time-content">
      <p style="margin-bottom:8px">请选择发表时间:</p>
      <el-select size="mini" style="width:130px;margin-right:10px" v-model="timeVal" @change="timeChange">
        <el-option v-for="item in dayOptions" :key="item.key" :label="item" :value="item"> </el-option>
      </el-select>
      <el-select size="mini" style="width:80px;margin-right:10px" v-model="hourVal">
        <el-option v-for="item in hourOptions" :key="item" :label="item" :value="item"> </el-option>
      </el-select>
      时
      <el-select size="mini" style="width:80px;margin:0 10px" v-model="minVal">
        <el-option v-for="item in minOptions" :key="item" :label="item" :value="item"> </el-option>
      </el-select>
      分
      <p style="margin-top:28px">(只能选择2小时-7天范围内的时间)</p>
      <p style="margin-top:28px">
        本文将于北京时间 {{ year }} 年 {{ timeVal | formatMonthAndDay }} {{ hourVal | formatHand }}:{{ minVal | formatHand }} 发布
      </p>
    </div>
    <span slot="footer" class="dialog-footer">
      <el-button size="mini" @click="handleClose">取消</el-button>
      <el-button size="mini" type="danger" :loading="loading" @click="sumbit">定时发送</el-button>
    </span>
  </el-dialog>
</template>
<script>
import { getDay } from '@/utils/index';
import json from './minute';

export default {
  props: {
    selectTimeVisible: {
      type: Boolean,
      default: false
    },
    loading: {
      type: Boolean,
      default: false
    }
  },
  data() {
    return {
      year: 2020,
      dayOptions: [getDay(0), getDay(1), getDay(2), getDay(3), getDay(4), getDay(5), getDay(6), getDay(7)],
      timeVal: getDay(0),
      hourOptions: [],
      hourVal: 0,
      minOptions: [],
      minVal: 0
    };
  },
  watch: {
    selectTimeVisible(val) {
      if (val) {
        let time = new Date();
        this.year = time.getFullYear();
        this.timeChange(getDay(0));
      }
    }
  },
  methods: {
    timeChange(val) {
      if (val == getDay(0)) {
        let date = new Date();
        let hour = date.getHours() + 2;
        let min = date.getMinutes();
        this.hourOptions = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 18, 19, 20, 21, 22, 23].slice(hour);
        this.minOptions = json.slice(min);
        this.hourVal = hour;
        this.minVal = min;
      } else {
        this.hourOptions = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 18, 19, 20, 21, 22, 23];
        this.minOptions = json;
      }
    },
    sumbit() {
      let result = this.timeVal.split('月');
      let month = result[0];
      let day = result[1].split('日');
      let time = `${this.year}-${month}-${day[0]} ${this.hourVal}:${this.minVal}`;
      let scheduleTime = this.$moment(time, 'YYYY-MM-DD HH:mm:ss').valueOf();
      this.$emit('submit', scheduleTime);
    },
    handleClose() {
      this.$emit('handleClose');
    }
  }
};
</script>
<style lang="scss" scoped>
.time-content {
  padding-top: 12px;
  font-size: 14px;
  color: #666;
}
</style>
